<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/template/internet-template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:jsf="http://xmlns.jcp.org/jsf"                
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html">
    <ui:define name="title">Músico</ui:define>
    <ui:define name="container">
        <h:form class="formSearch">
            <fieldset>
                <legend>Músico</legend>
                <h:panelGroup rendered="${musicianSearch.musician != null}">
                    <label class="titleSearch">${musicianSearch.musician.name}</label>
                    <hr/>
                    <div style="font-weight: lighter; font-size: 13px">
                        Atualizado por: ${musicianSearch.musician.updaterUser.name} em
                        <label jsf:value="${musicianSearch.musician.lastUpdate}">
                            <f:convertDateTime pattern="' 'HH:mm:ss' - 'dd/MM/yyyy"/>
                        </label>                    
                    </div>                    
                    <br/>
                    Data de nascimento: 
                    <label jsf:value="${musicianSearch.musician.birthday}">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                    </label>
                    <br/>
                    Origem: ${musicianSearch.musician.originCity.description}
                    <br/>
                    Sexo: ${musicianSearch.musician.gender.gender}
                    <br/>
                    <br/>
                    <label class="titleSearch" style="font-size: 20px">Biografia</label>                   
                    <br/>
                    <br/>
                    <div style="width:80%; font-weight: normal">
                        ${musicianSearch.musician.biography}
                    </div>                    
                    <br/>
                    <br/>
                    <label class="titleSearch" style="font-size: 20px">Composições</label>
                    <hr/>
                    <br/>
                    <table style="font-weight: normal; width:70%; ">
                        <tr style="font-weight: bold; border-bottom: dashed 1px #3AAACF;">
                            <td style="border-bottom: dashed 1px #3AAACF;">Nome</td>
                            <td style="border-bottom: dashed 1px #3AAACF;">Album</td>
                            <td style="border-bottom: dashed 1px #3AAACF;">Duração</td>
                        </tr>
                        <ui:repeat value="${musicianSearch.musician.compositions}" var="song">
                            <tr>
                                <td style="border-bottom: dashed 1px #3AAACF;">
                                    <a style="color: #06799F;text-decoration: underline; font-size: 16px;"  
                                       href="../song/page.jsp?idSong=${song.id}"> 
                                        ${song.title} 
                                    </a>
                                </td>
                                <td style="border-bottom: dashed 1px #3AAACF;">
                                    ${song.album.title}                                      
                                </td>    
                                <td style="border-bottom: dashed 1px #3AAACF;">
                                    ${song.durationMinutes} minuto(s)
                                </td>
                            </tr>
                        </ui:repeat>
                    </table>
                    <br/>
                    <br/>
                    <label class="titleSearch" style="font-size: 20px">Grupos</label>
                    <hr/>
                    <br/>
                    <table style="font-weight: normal; width:70%; ">
                        <tr style="font-weight: bold; border-bottom: dashed 1px #3AAACF;">
                            <td style="border-bottom: dashed 1px #3AAACF;">Nome</td>                            
                            <td style="border-bottom: dashed 1px #3AAACF;">Gênero</td>
                            <td style="border-bottom: dashed 1px #3AAACF;">Ano</td>
                        </tr>
                        <ui:repeat value="${musicianSearch.musician.artists}" var="artist">
                            <tr>
                                <td style="border-bottom: dashed 1px #3AAACF;">
                                    <a style="color: #06799F;text-decoration: underline; font-size: 16;"  
                                       href="../artist/page.jsp?idArtist=${artist.id}"> 
                                        ${artist.name} 
                                    </a>
                                </td>
                                <td style="border-bottom: dashed 1px #3AAACF;">                                    
                                    ${artist.genre.name} 
                                </td>    
                                <td style="border-bottom: dashed 1px #3AAACF;">
                                    ${artist.year} 
                                </td>
                            </tr>
                        </ui:repeat>
                    </table>
                </h:panelGroup>
                <h:panelGroup rendered="${musicianSearch.musician == null}">
                    Nenhum músico selecionado.
                </h:panelGroup>
            </fieldset>
        </h:form>
    </ui:define>

</ui:composition>

